/* Timeline Page Layout */
.timeline-page .page-header {
    margin-bottom: var(--space-l);
}

/* Horizontal Scroll Timeline */
.timeline-container {
    width: 100%;
    overflow-x: auto;
    padding: var(--space-l) 0;
    background-image: url('../assets/images/bg-scroll-horizontal.jpg');
    background-repeat: repeat-x;
    background-size: contain;
}

.timeline-scroll {
    display: flex;
    width: max-content;
    padding: 0 var(--space-xl);
    border-top: 3px solid #8B4513; /* SaddleBrown */
    border-bottom: 3px solid #8B4513;
    position: relative;
}

.timeline-event {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: var(--space-m) var(--space-l);
    min-width: 250px;
}

.timeline-event:nth-child(even) {
    transform: translateY(60px);
}

.timeline-event:nth-child(odd) {
    transform: translateY(-60px);
}

.event-milestone {
    width: 20px;
    height: 20px;
    background-color: var(--cinnabar-red);
    border: 3px solid var(--xuan-paper-white);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(200, 59, 35, 0.7);
}

.event-date {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--celadon-blue);
}

.event-description {
    background: rgba(247, 241, 227, 0.8); /* Semi-transparent Xuan Paper White */
    backdrop-filter: blur(2px);
    padding: var(--space-m);
    border-radius: 5px;
    text-align: center;
}

/* Achievements Section */
.achievements-section {
    padding: var(--space-xl) var(--space-m);
    text-align: center;
}

.badge-shelf {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-xl);
    padding: var(--space-l);
    background: none;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    z-index: 2;
    min-height: 180px;
}

/* 粒子动效底座 */
.badge-shelf-bg {
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
}

.badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-s);
    position: relative;
    z-index: 3;
    transition: transform 0.32s cubic-bezier(.22,1.12,.56,1.08), filter 0.22s;
    filter: drop-shadow(0 0 12px #b0a08488);
}

.badge-item img {
    width: 80px;
    height: 80px;
    transition: transform 0.32s cubic-bezier(.22,1.12,.56,1.08), filter 0.22s;
    filter: drop-shadow(0 0 18px #fffbe6cc);
    border-radius: 18px;
    background: rgba(255,255,255,0.08);
}

.badge-item:hover img {
    transform: scale(1.18) rotate(-6deg);
    filter: drop-shadow(0 0 32px #c23b23cc) brightness(1.12);
}

.badge-item:hover {
    transform: translateY(-12px) scale(1.08) rotate(-2deg);
    filter: drop-shadow(0 0 32px #c23b23cc) brightness(1.10);
}

.badge-item p {
    color: var(--xuan-paper-white);
    font-weight: bold;
    font-family: var(--font-sans);
    letter-spacing: 2px;
    text-shadow: 0 2px 8px #b0a084cc;
    font-size: 1.1rem;
}

/* 科技感标题 */
.achievements-section .section-title {
    font-family: var(--font-sans);
    font-size: 2.1rem;
    color: #fffbe6;
    letter-spacing: 0.22em;
    text-shadow: 0 2px 0 #3a5a6c, 0 0 16px #b0a08488, 0 0 32px #c23b2344;
    filter: drop-shadow(0 0 8px #b0a08444) brightness(1.08);
    border-bottom: 3px solid #b0a084;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(90deg, #3a5a6c 60%, #b0a084 100%);
    box-shadow: 0 2px 12px #b0a08422;
    padding-bottom: 0.3em;
    margin-bottom: 1.2em;
    position: relative;
    z-index: 4;
}

body.night-mode .achievements-section .section-title {
    color: #b0a084;
    text-shadow: 0 2px 0 #fffbe6, 0 0 16px #3a5a6c88, 0 0 32px #fffbe644;
    border-bottom: 3px solid #fffbe6;
    background: linear-gradient(90deg, #232323 60%, #3a5a6c 100%);
}
body.night-mode .badge-item p {
    color: #b0a084;
    text-shadow: 0 2px 8px #3a5a6ccc;
} 